/* eslint-disable react/jsx-no-duplicate-props */
/* eslint-disable no-param-reassign */
/* eslint-disable no-unused-expressions */
/* eslint-disable consistent-return */
/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import { connect } from 'dva';

import {
  ExclamationCircleOutlined,
  InfoCircleOutlined,
  LinkOutlined,
  PlusCircleOutlined,
  PlusOutlined,
} from '@ant-design/icons';

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

import {
  Card,
  Button,
  Col,
  Row,
  DatePicker,
  Input,
  Select,
  Tooltip,
  Table,
  message,
  Popconfirm,
  Checkbox,
  Spin,
  InputNumber,
} from 'antd';
import queryString from 'query-string';
import router from 'umi/router';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
// import Policy from '@/components/PolicyDetail/policyDetail';
import styles from '@/utils/utils.less';
import Policy from '../../components/PolicyDetail';
import Area from '../../components/Area';
import BankForm from './Bank';

const { Option } = Select;
const { MonthPicker } = DatePicker;
const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;
@connect(({ singlemanage, loading }) => ({
  singlemanage,
  loading: loading.models.singlemanage,
  formFieldsValue: singlemanage.formFieldsValue,
  expandForm: singlemanage.expandForm,
  pageData: singlemanage.pageData,
  activeKey: singlemanage.activeKey,
  insUpdateData: singlemanage.insUpdateData, // 社保要回显的数据
}))
@Form.create()
class InsUpdate extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '', // 页签
      custInsAccoId: '', // 社保账户id
      custId: '', // 客户名称id
      plainOptions: [], // 缴纳险种集合
      payWayList: [], // 支付方式下拉数据
      payWay: '3', // 支付方式
      selectedAreaId: '', // 选中的地区id
      socialList: [], // 社保组合下拉
      bankAccoList: [], // 下拉列表中客户银行账户信息
      bankList: [], // 银行列表
      entpTypeList: [], // 开户企业类型下拉列表
      isShowGS: false, // 是否显示企业工伤比例
      policyVisible: 'false', // 政策弹框变量
      updateModVisible: 'false', // 银行弹框变量
      plcyId: '', // 社保组合id
      accuOrIns: '1', // 社保传1 ， 公积金传2
      PAY_FEES_WAY: [], // 单立户，大库字典数据集合
      dataSource: [], // 企业工伤比例的表格数据
      index: 0, // 企业工伤比例的表格下标
      YES_NO_FLAG: [], // 是否开户完成
      isdoneFlag: '1',
      insUnify: {}, // 五险是否合一
      insKinds: [], // 缴纳险种
      btnLoading: false,
      subProhibit: false,
      ratioValList: [],
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    this.state.activeKey = queryString.parse(location.search).activeKey;
    const custInsAccoId = queryString.parse(location.search).baseInfoId;
    this.setState({ custInsAccoId });
    // 获取页面所有的字典值
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: [
        'ACCO_PAY_WAY',
        'BANK_ID',
        'PAY_FEES_WAY',
        'BIZ_INS_TYPE',
        'YES_NO_FLAG',
        'ENTP_TYPE',
      ],
    }).then(data => {
      if (data && data.ACCO_PAY_WAY && data.ACCO_PAY_WAY.length) {
        this.setState({ payWayList: data.ACCO_PAY_WAY });
      }
      if (data && data.YES_NO_FLAG && data.YES_NO_FLAG.length) {
        this.setState({ YES_NO_FLAG: data.YES_NO_FLAG });
      }
      if (data && data.BANK_ID && data.BANK_ID.length) {
        this.setState({ bankList: data.BANK_ID });
      }
      if (data && data.ENTP_TYPE && data.ENTP_TYPE.length) {
        this.setState({ entpTypeList: data.ENTP_TYPE });
      }
      if (data && data.BIZ_INS_TYPE && data.BIZ_INS_TYPE.length) {
        data.BIZ_INS_TYPE.map(item => {
          const temp = item;
          temp.label = item.itemName;
          temp.value = item.itemCode;
        });
        this.setState({ plainOptions: data.BIZ_INS_TYPE });
      }
      if (data && data.PAY_FEES_WAY && data.PAY_FEES_WAY.length) {
        data.PAY_FEES_WAY.forEach(item => {
          if (item.itemName === '单立户') {
            this.setState({ payWay: item.itemCode });
          }
        });
        this.setState({ PAY_FEES_WAY: data.PAY_FEES_WAY });
      }
    });
    // 查社保的回显数据
    dispatch({
      type: 'singlemanage/getInsDetail',
      payload: {
        custInsAccoId,
      },
    }).then(res => {
      if (res.success && res.data) {
        // 企业工伤比例
        if (res.data.ratioVal || Number(res.data.ratioVal) === 0) {
          this.setState({ isShowGS: true });
          dispatch({
            type: 'singlemanage/getInjRatios',
            payload: {
              custInsAccoId,
            },
          }).then(result => {
            if (result.success && result.data && result.data.length) {
              const tempData = result.data;
              if (tempData.length > 2) {
                tempData[0].rangeDate = moment(tempData[1].beginYm, 'YYYY-MM')
                  .date(32)
                  .format('YYYYMM');
              }

              // 制作数组长度的辅助提示数组
              const ratioValList = new Array(tempData.length);
              // 将辅助数组填充固定内容
              ratioValList.fill({ status: null, help: null });
              this.setState({
                dataSource: tempData,
                index: tempData.length,
                ratioValList,
              });
            } else {
              this.setState({ dataSource: [], index: 0 });
              message.warning(`${result.message || '服务端错误！'}`);
            }
          });
        } else {
          this.setState({ isShowGS: false });
        }
        // 根据客户名称id，获取银行账户信息列表
        if (res.data.custId) {
          this.setState({ custId: res.data.custId });
          this.getBankList(res.data.custId);
        }
        // 获取社保组合
        if (res.data.payWay && res.data.areaId) {
          const areaId = res.data.areaId.split(',');
          if (res.data.payWay === 1) {
            this.setState({
              socialList: [{ insLsPkgId: res.data.plcyId, insLsPkgName: res.data.plcyName }],
              plcyId: res.data.plcyId,
            });
          } else {
            const { PAY_FEES_WAY } = this.state;
            let payWay = '';
            PAY_FEES_WAY.forEach(item => {
              if (item.itemName === '单立户') {
                payWay = item.itemCode;
              }
            });
            if (areaId[areaId.length - 1]) {
              const param = {
                payWay,
                areaId: areaId[areaId.length - 1],
              };
              this.setState({ payWay, plcyId: res.data.plcyId });
              dispatch({
                type: 'singlemanage/getInsLsPkgName',
                payload: param,
              }).then(response => {
                if (response.success && response.data && response.data.length) {
                  this.setState({ socialList: response.data });
                } else {
                  this.setState({ socialList: [] });
                }
              });
            }
          }
        }
        // 是否显示缴纳险种
        if (res.data.insKinds.indexOf('5') > -1) {
          // 有工伤
          this.setState({ isShowGS: true, insKinds: res.data.insKinds.split(',') });
        } else {
          this.setState({ isShowGS: false, insKinds: res.data.insKinds.split(',') });
        }
        // 地区
        if (res.data.areaId) {
          this.setState({ selectedAreaId: res.data.areaId });
        }
        return res.data;
      }
    });
  }

  // 获取客户银行账户列表
  getBankList = custId => {
    const { dispatch } = this.props;
    const { bankList } = this.state;
    dispatch({
      type: 'singlemanage/getBankAccoList',
      payload: {
        custId,
      },
    }).then(response => {
      if (response.success && response.data && response.data.length) {
        const bankAccoList = [];
        response.data.map(item => {
          const temp = item;
          temp.bankId = this.matchDict(bankList, item.bankId);
          const bankInfo = `${item.bankId} ${item.bankAcco}`;
          const { bankAccoId } = item;
          bankAccoList.push({ bankAccoId, bankInfo });
        });
        this.setState({ bankAccoList });
      }
    });
  };

  // 匹配字典
  matchDict = (list, id) => {
    let dict = null;
    list.map(item => {
      if (Number(item.itemCode) === id) {
        dict = item.itemName;
      }
    });
    return dict;
  };

  // 模糊查询 (地区)
  getAreaData = value => {
    const { dispatch, form } = this.props;
    const { payWay } = this.state;
    this.setState({ selectedAreaId: value, plcyId: '' });
    form.resetFields(['plcyId', 'insKinds']); //  重置上一次带出的社保组合id及缴纳险种
    dispatch({
      type: 'singlemanage/updateClearData',
      payload: {},
    });
    dispatch({
      type: 'singlemanage/getInsLsPkgName',
      payload: {
        payWay,
        areaId: value,
      },
    }).then(response => {
      if (response.success && response.data && response.data.length) {
        this.setState({ socialList: response.data });
      } else {
        this.setState({ socialList: [] });
      }
    });
    dispatch({
      type: 'singlemanage/getQueryPlcyParam',
      payload: {
        areaId: value,
      },
    }).then(response => {
      if (response.success) {
        this.setState({ insUnify: response.data });
        form.resetFields(['doneFlag']);
        if (response.success && response.data.areaId) {
          this.setState({ subProhibit: false });
        } else {
          message.warning('根据地区获取不到是否五险合一规则，请联系平台管理员配置。');
          this.setState({ subProhibit: true });
        }
      } else {
        this.setState({ insUnify: {} });
        form.resetFields(['doneFlag']);
      }
    });
  };

  // 选中支付方式
  selectPayWay = value => {
    this.setState({ payWay: value });
  };

  // 选择是否开户完成
  isdoneFlag = e => {
    this.setState({ isdoneFlag: e });
  };

  // 判断是否有工伤
  selectInsu = checkedList => {
    this.setState({ insKinds: checkedList });
    if (checkedList.indexOf('5') > -1) {
      this.setState({ isShowGS: true });
    } else {
      this.setState({ isShowGS: false });
    }
  };

  // 取消
  cancel = () => {
    const { activeKey } = this.state;
    activeKey
      ? router.push(`/customservicemanage/singleaccount/index?activeKey=${activeKey}`)
      : router.push(`/customservicemanage/singleaccount/index`);
  };

  // 增加银行
  setModalShow = () => {
    this.setState({ updateModVisible: 'true' });
  };

  // 传给银行子组件的函数
  cancelModal = (modalClose, success) => {
    const { custId } = this.state;
    this.setState({ updateModVisible: modalClose });
    if (success) {
      this.getBankList(custId);
    }
  };

  // 弹出政策详情
  setPolicyModalShow = () => {
    this.setState({ policyVisible: 'true' });
  };

  // 传给政策子组件的函数
  cancelPolicyModal = modalClose => {
    this.setState({ policyVisible: modalClose });
  };

  // 添加比例
  addList = () => {
    const { dataSource, ratioValList, index } = this.state;
    const newData = JSON.parse(JSON.stringify(dataSource));
    let beginYm;
    let newTemData;
    if (!newData || !newData.length) {
      beginYm = null;
      newTemData = null;
    } else if (!newData[0].beginYm) {
      beginYm = moment(new Date()).format('YYYYMM');
      newTemData = moment(new Date()).format('YYYYMM');
    } else {
      newTemData = moment(newData[0].beginYm, 'YYYY-MM')
        .date(32)
        .format('YYYYMM');
      beginYm =
        moment(new Date()).format('YYYYMM') > newTemData
          ? moment(new Date()).format('YYYYMM')
          : newTemData;
    }
    if (dataSource.length === 0) {
      newData.unshift({
        key: `list_${index}`,
        insInjRatioId: null,
        beginYm,
        rangeDate: newTemData,
        ratioVal: null,
        updateFlag: 2, // 1是可修改,2是不可修改
      });
    } else {
      newData.unshift({
        key: `list_${index}`,
        insInjRatioId: null,
        beginYm,
        rangeDate: newTemData,
        ratioVal: null,
        updateFlag: 1, // 1是可修改,2是不可修改
      });
    }
    // 确保table中的rowkey保持一致
    const newKeyData = newData.map(item => ({
      ...item,
      key: item.key ? item.key : item.insInjRatioId,
    }));
    // 新增时向头部填充辅助信息
    ratioValList.unshift({ status: null, help: null });
    this.state.index += 1;
    this.setState({ dataSource: newKeyData, ratioValList });
  };

  // 删除行
  remove = (record, index) => {
    const { dataSource, ratioValList } = this.state;
    const newData = dataSource.filter(item => (item.insInjRatioId || item.key) !== record.key);
    // 删除当前项
    ratioValList.splice(index, 1);
    this.setState({ dataSource: newData, ratioValList: [...ratioValList] });
  };

  // 企业工伤比例改变时
  dataSlist = (e, record, index) => {
    const { dataSource } = this.state;
    const newData = dataSource.map(item => ({ ...item }));
    newData.map((item, idx) => {
      const temp = item;
      if (index === idx) {
        temp.ratioVal = e;
      }
    });
    this.setState({ dataSource: newData });
  };

  // 开始年月发生改变时
  dataTimelist = (date, record, index) => {
    const { dataSource } = this.state;
    const newData = dataSource.map(item => ({ ...item }));
    newData.map((item, idx) => {
      const temp = item;
      if (index === idx) {
        if (date === null) {
          temp.beginYm = null;
        }
        temp.beginYm = moment(date).format('YYYYMM');
      }
    });
    this.setState({ dataSource: newData });
  };

  disabledDate = (startValue, limitDate) => {
    const { dataSource } = this.state;
    const newData = dataSource.map(item => ({ ...item }));
    if (!startValue) {
      return false;
    }
    if (newData.length === 1) {
      return false;
    }
    if (newData.length === 2 && !newData[1].beginYm) {
      return false;
    }
    return startValue.valueOf() < moment(limitDate).valueOf();
  };

  // 校验工伤比例
  handleCheckRatio = (rules, value, callback, index) => {
    const { ratioValList } = this.state;
    let status = null;
    let help = null;
    const reg = /^-?\d+\.?\d{0,4}$/;
    if (!reg.test(value)) {
      help = '请输入小数点不超过4位的数字';
      status = 'error';
      callback(new Error('请输入小数点不超过4位的数字'));
    } else if (value === 0) {
      callback();
    } else if (value < 0.01) {
      help = '工伤比例小于了0.01%，请确认是否填写的正确';
      status = 'warning';
      // callback(new Error('工伤比例小于了0.01%，请确认是否填写的正确'));
      callback();
    } else {
      callback();
    }
    // 设置对应的辅助信息
    ratioValList[index] = { status, help };

    this.setState({
      // status,
      ratioValList: [...ratioValList],
      // help,
    });
  };

  // 提交数据
  submitAll = () => {
    const {
      dispatch,
      form,
      singlemanage: { insUpdateData },
    } = this.props;
    const {
      custInsAccoId,
      custId,
      payWay,
      selectedAreaId,
      isdoneFlag,
      plcyId,
      isShowGS,
      dataSource,
      insUnify,
      insKinds,
      activeKey,
    } = this.state;
    form.validateFields((err, values) => {
      if (!err) {
        this.setState({ btnLoading: true });
        // eslint-disable-next-line no-param-reassign
        values = {
          custInsAccoId, // 社保账户id
          custId, // 客户名称id
          payWay, // 支付方式
          areaId: selectedAreaId, // 地区id
          custBankId: values.custBankId, // 银行账户id
          doneFlag: isdoneFlag, // 是否开户完成
          plcyId, // 社保组合id
          remark: values.remark, // 备注
          accoName: values.accoName,
          uniCreditCode: values.uniCreditCode,
          orgName: values.orgName,
          insOrg: values.insOrg,
          entpType: values.entpType,
        };
        // 是否有企业工伤比例
        if (isShowGS || (insUpdateData.insKindNames === ' 社保' && isdoneFlag === '1')) {
          values.insInjRatioVos = dataSource;
        }
        // 缴纳险种
        if (insUpdateData.insKindNames === ' 社保' || insUnify.insUnifyFlag === 1) {
          values.insKinds = '3,4,5,6,7';
        } else {
          values.insKinds = insKinds.join(',');
        }

        dispatch({
          type: 'singlemanage/insUpdateSubmit',
          payload: values,
        }).then(response => {
          if (response.success) {
            message.success('修改成功');
            router.push(`/customservicemanage/singleaccount/index?activeKey=${activeKey}`);
            this.setState({ btnLoading: false });
          } else {
            message.warning(`${response.message || '提交数据失败：服务器端错误'}`);
            this.setState({ btnLoading: false });
          }
        });
      }
    });
  };

  // 渲染函数
  render() {
    const {
      plainOptions,
      payWayList,
      socialList,
      updateModVisible,
      custId,
      bankAccoList,
      policyVisible,
      plcyId,
      accuOrIns,
      insUnify,
      isdoneFlag,
      isShowGS,
      dataSource,
      YES_NO_FLAG,
      btnLoading,
      subProhibit,
      selectedAreaId,
      entpTypeList,
    } = this.state;
    const {
      form: { getFieldDecorator },
      loading,
      singlemanage: { insUpdateData },
    } = this.props;
    const columns = [
      {
        title: '开始年月',
        dataIndex: 'beginYm',
        key: 'beginYm',
        width: '15%',
        render: (text, record, index) => (
          <MonthPicker
            placeholder="请选择"
            format="YYYY-MM"
            style={{ width: '100%' }}
            value={text ? moment(text, 'YYYY-MM') : null}
            disabled={record.updateFlag === 2}
            onChange={date => this.dataTimelist(date, record, index)}
            disabledDate={startValue => this.disabledDate(startValue, record.rangeDate)}
            allowClear={false}
          />
        ),
      },
      {
        title: '企业工伤比例(%)',
        dataIndex: 'ratioVal',
        key: 'ratioVal',
        width: '15%',
        render: (text, record, index) => (
          <FormItem
            style={{ margin: 0, paddingBottom: 0 }}
            validateStatus={this.state.ratioValList?.[index]?.status}
            help={this.state.ratioValList?.[index]?.help}
          >
            {getFieldDecorator(`injRatioList[${record.key || record.insInjRatioId}]['ratioVal']`, {
              rules: [
                {
                  type: 'number',
                  required: true,
                  options: { index },
                  validator: (rules, value, callback) => {
                    this.handleCheckRatio(rules, value, callback, index);
                  },
                },
              ],
              initialValue: text,
            })(
              <InputNumber
                placeholder="请输入"
                min={0}
                max={99.9999}
                style={{ width: '100%' }}
                onChange={e => this.dataSlist(e, record, index)}
              />
            )}
          </FormItem>
        ),
      },
      {
        title: '操作',
        key: 'action',
        width: '15%',
        render: (text, record, index) =>
          record.insInjRatioId ? null : (
            <span>
              <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record, index)}>
                <a>删除</a>
              </Popconfirm>
            </span>
          ),
      },
    ];
    return (
      <Form layout="vertical">
        <PageHeaderWrapper wrapperClassName={styles.advancedForm}>
          <Spin tip="Loading..." spinning={loading}>
            <Card title={<span style={{ fontWeight: 'bolder' }}>社保账户信息</span>}>
              <Row gutter={64}>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="客户名称">
                    {getFieldDecorator('custId', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: insUpdateData.custName,
                    })(<Input disabled />)}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="社保账户名称">
                    {getFieldDecorator('accoName', {
                      rules: [{ required: true, pattern:/^(?!\.)[^\\/:*?"<>|]{1,255}$/,message: '文件名不能包含下列任何字符  \\  /  :  *   ?  "  <  >  |'}],
                      initialValue: insUpdateData.accoName,
                    })(<Input placeholder="请输入" maxLength={100} />)}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="统一社会信用代码">
                    {getFieldDecorator('uniCreditCode', {
                      rules: [
                        {
                          required: false,
                          message: '长度为18位的数字与字母组合',
                          pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{18}$/,
                        },
                      ],
                      initialValue: insUpdateData.uniCreditCode,
                    })(<Input placeholder="请输入" disabled />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="地区">
                    {getFieldDecorator('areaId', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: insUpdateData.areaName || null,
                    })(
                      insUpdateData.state === 2 || insUpdateData.state === 3 ? (
                        <Input placeholder="请输入" disabled />
                      ) : (
                        <Area onSelect={this.getAreaData} />
                      )
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="单位名称">
                    {getFieldDecorator('orgName', {
                      rules: [{ required: true, message: '请输入' }],
                      initialValue: insUpdateData.orgName,
                    })(
                      <Input
                        placeholder="请输入"
                        maxLength={100}
                        disabled={insUpdateData.state === 2 || insUpdateData.state === 3}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="所属社保机构">
                    {getFieldDecorator('insOrg', {
                      rules: [{ required: true, message: '请输入' }],
                      initialValue: insUpdateData.insOrg,
                    })(<Input placeholder="请输入" maxLength={100} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem
                    label={
                      <span>
                        支付方式{' '}
                        <Tooltip title="修改后默认当月生效，生效范围为所有未实缴数据">
                          {' '}
                          <InfoCircleOutlined />
                        </Tooltip>
                      </span>
                    }
                  >
                    {getFieldDecorator('payWay', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: insUpdateData.payWayName,
                    })(
                      <Select
                        placeholder="请选择"
                        onChange={this.selectPayWay}
                        disabled={insUpdateData.state === 2 || insUpdateData.state === 3}
                      >
                        {payWayList.map(item => (
                          <Option key={item.itemCode}>{item.itemName}</Option>
                        ))}
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <Col span={22} style={{ paddingLeft: 0, paddingRight: 0, float: 'left' }}>
                    <FormItem label="银行账户信息">
                      {getFieldDecorator('custBankId', {
                        rules: [{ required: false, message: '请输入' }],
                        initialValue: insUpdateData.custBankId,
                      })(
                        <Select placeholder="请选择">
                          {bankAccoList.map(item => (
                            <Option key={item.bankAccoId}>{item.bankInfo}</Option>
                          ))}
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col
                    span={1}
                    offset={1}
                    style={{ paddingLeft: 0, paddingRight: 0, float: 'left' }}
                  >
                    <FormItem>
                      {custId ? (
                        <PlusCircleOutlined
                          style={{
                            width: '100%',
                            marginTop: 33,
                            color: '#40a9ff',
                            fontSize: '24px',
                          }}
                          onClick={this.setModalShow}
                        />
                      ) : (
                        <PlusCircleOutlined
                          style={{
                            width: '100%',
                            marginTop: 33,
                            color: 'rgb(206, 206, 206)',
                            fontSize: '24px',
                          }}
                        />
                      )}
                    </FormItem>
                  </Col>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem
                    label={
                      <Tooltip
                        placement="right"
                        title="实际业务情况中该账户未开户完成，可以使用是否开户完成功能进行标记。后续开户完成时，进行修改取消标记即可。针对工伤险种，取消未开户完成标记时，需维护工伤比例信息。"
                      >
                        <span>是否开户完成</span>
                        <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                      </Tooltip>
                    }
                  >
                    {getFieldDecorator('doneFlag', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: insUpdateData.doneFlagName,
                    })(
                      <Select
                        placeholder="请选择"
                        onChange={this.isdoneFlag}
                        disabled={
                          !!(
                            insUpdateData &&
                            insUpdateData.state !== 1 &&
                            insUpdateData.doneFlag === 1
                          )
                        }
                      >
                        {YES_NO_FLAG.map(item => (
                          <Option key={item.itemCode}>{item.itemName}</Option>
                        ))}
                      </Select>
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                {insUpdateData.insKindNames === ' 社保' || insUnify.insUnifyFlag === 1 ? null : (
                  <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                    <FormItem
                      label={
                        <Tooltip
                          placement="right"
                          title="五险不合一的地区需根据险种的申报政策来选择险种，如果每个险种的申报政策（包括申报时间和回盘时间）都不同则只能单选并分别创建5个单立户，如果其中有两个险种的申报政策是完全相同的，比如医疗和生育，则可以复选，险种组合一旦选中并生效不可以再做修改。"
                        >
                          <span>缴纳险种</span>
                          <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                        </Tooltip>
                      }
                    >
                      {getFieldDecorator('insKinds', {
                        rules: [{ required: true, message: '请选择' }],
                        initialValue: insUpdateData.insKinds && insUpdateData.insKinds.split(','),
                      })(
                        <CheckboxGroup
                          options={plainOptions}
                          onChange={this.selectInsu}
                          style={{ marginLeft: 15 }}
                          disabled={insUpdateData.state === 2 || insUpdateData.state === 3}
                        />
                      )}
                    </FormItem>
                  </Col>
                )}
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <Col span={22} style={{ paddingLeft: 0, paddingRight: 0, float: 'left' }}>
                    <FormItem label="社保组合">
                      {getFieldDecorator('plcyId', {
                        rules: [{ required: true, message: '请选择' }],
                        initialValue: insUpdateData.plcyId,
                      })(
                        <Select
                          placeholder="请选择"
                          onSelect={value => {
                            this.setState({ plcyId: value });
                          }}
                          disabled={insUpdateData.state === 2 || insUpdateData.state === 3}
                        >
                          {socialList.map(item => (
                            <Option key={item.insLsPkgId}>{item.insLsPkgName}</Option>
                          ))}
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col
                    span={1}
                    offset={1}
                    style={{ paddingLeft: 0, paddingRight: 0, float: 'left' }}
                  >
                    <FormItem>
                      {plcyId ? (
                        <LinkOutlined
                          style={{
                            width: '100%',
                            marginTop: 33,
                            color: '#40a9ff',
                            fontSize: '24px',
                          }}
                          onClick={this.setPolicyModalShow}
                        />
                      ) : (
                        <LinkOutlined
                          style={{
                            width: '100%',
                            marginTop: 33,
                            color: 'rgb(206, 206, 206)',
                            fontSize: '24px',
                          }}
                        />
                      )}
                    </FormItem>
                  </Col>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="开户企业类型">
                    {getFieldDecorator('entpType', {
                      rules: [{ required: true, message: '请选择开户企业类型' }],
                      initialValue: insUpdateData.entpType && insUpdateData.entpType.toString(),
                    })(
                      <Select placeholder="请选择开户企业类型">
                        {entpTypeList &&
                          entpTypeList.length > 0 &&
                          entpTypeList.map(item => (
                            <option key={item.itemCode}>{item.itemName}</option>
                          ))}
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="备注">
                    {getFieldDecorator('remark', {
                      initialValue: insUpdateData.remark,
                    })(<Input placeholder="请输入" maxLength={200} />)}
                  </FormItem>
                </Col>
              </Row>
            </Card>
            {updateModVisible === 'true' ? (
              <BankForm custId={custId} cancelModal={this.cancelModal} />
            ) : null}
            {policyVisible === 'true' ? (
              <Policy
                plcyId={plcyId}
                accuOrIns={accuOrIns}
                areaId={selectedAreaId}
                cancelPolicyModal={this.cancelPolicyModal}
                socialData={socialList}
                cancelPolicyModal={modalClose => this.cancelPolicyModal(modalClose)}
              />
            ) : null}
            {(isdoneFlag === '1' && insUpdateData.insUnifyFlag === 1) ||
            (isdoneFlag === '1' && insUpdateData.insKindNames === ' 社保') ||
            (isShowGS && isdoneFlag === '1' && insUpdateData.insKindNames !== ' 社保') ? (
              <Card title={<span style={{ fontWeight: 'bolder' }}>企业工伤比例信息</span>}>
                <Row gutter={64}>
                  <Col xl={{ span: 16 }} lg={{ span: 16 }} md={{ span: 16 }} sm={24}>
                    <Button
                      style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
                      type="dashed"
                      onClick={this.addList}
                      icon={<PlusOutlined />}
                    >
                      添加比例
                    </Button>
                    <Table
                      columns={columns}
                      dataSource={dataSource}
                      pagination={false}
                      rowClassName={styles.editableRow}
                    />
                  </Col>
                </Row>
              </Card>
            ) : null}
            <FooterToolbar style={{ width: '100%' }}>
              <Button onClick={this.cancel} style={{ marginRight: 10 }}>
                取消
              </Button>
              <Button
                type="primary"
                onClick={this.submitAll}
                loading={btnLoading}
                disabled={subProhibit}
              >
                提交
              </Button>
            </FooterToolbar>
          </Spin>
        </PageHeaderWrapper>
      </Form>
    );
  }
}
export default InsUpdate;
